<template>
	<view class="own-sign-in">
		<view class="own-one">
			<image class="own-img" src="../../static/img/index1/u204.png" ></image>
			<view class="sign-in-mid">
				<view>{{nowData}}</view>
				<view class="sign-in-mid-ed">
					已签到, 明天可获得15积分
				</view>
			</view>
		</view>
		
		<Calendar :months="months" :value="value" @next="next" @prev="prev"  @select="select" ref="calendar"
		 @selectMonth="selectMonth" @selectYear="selectYear" :now="false" :tileContent="tileContent" />
	
		<view class="background-banner-color">
			
		</view>
		<view class="own-sign-in-footer">
			<view class="top">
				今日奖励
			</view>
			<view class="buttom">
				积分+15
			</view>
		</view>
	</view>
</template>

<script>
	import Calendar from 'mpvue-calendar'
	import 'mpvue-calendar/src/style.css'
	export default {
		components: {
			Calendar
		},
		computed:{
			nowData(){
				var myDate = new Date();
				return myDate.getMonth()+1 +"月"+myDate.getDate()+"日";        //获取当前日(1-31)
			}
		},
		data() {
			return {
				tileContent: [{
						date: '2019-2-7',
						className: 'holiday '
					},
					{
						date: '2019-2-8',
						className: 'holiday '
					},
					{
						date: '2019-2-9',
						className: 'holiday '
					}
				],
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.own-sign-in {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		
		.own-one {
			// border: 1px solid red;
			padding: 0px;
		}
		
		.own-img{
			// border: 1px solid blue;
			// width: 100%;
			vertical-align:middle;
			box-sizing: border-box;
			width: 750upx;
			height: 340upx;
		}

		.holiday {
			// background-color: #87acd2;
			// border-radius: 50%;
			color: blue !important;
		}
		
		.mpvue-calendar{
			margin:0px !important;
			
		}
		
		.sign-in-mid {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px 20px;
			align-items: center;
			// border: 1px solid blue;
			background-color: rgba(242, 242, 242, 1);
		}
		
		.sign-in-mid-ed{
			background-color: rgba(255, 102, 0, 1);
			border-radius: 2em;
			padding: 10upx 50upx;
		}
		
		.background-banner-color{
			background-color: rgba(242, 242, 242, 1);
			height: 10px;
			width: 100%;
			// border: 1px solid blue;
			box-sizing: border-box;
		}
		
		.own-sign-in-footer {
			display: flex;
			flex-direction: column;
			color: #592C01;
			font-size: 13px;
			.top {
				padding: 20upx 40upx;
			}
			
			.buttom {
				text-align: center;
			}
		}
		
		
	}
</style>
